<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听响应式变量</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      
    </div>
  </body>

  <script>
    const App = Vue.createApp({
        setup(){
            let a=Vue.reactive({data:0})
            let b=Vue.ref(0)
            Vue.watch(()=>{
              return a.data
            }, (value,old)=>{
              console.log(value, old)
            })
            a.data = 1
            Vue.watch(b, (value,old)=>{
              console.log(value, old)
            })
            b.value =3
            
            //多个数据源
            let c=Vue.reactive({data:0})
            let d=Vue.ref(0)
            Vue.watch([()=>{
              return c.data;
            },d],([valueC,valueD],[oldC,oldD])=>{
              console.log(valueC,oldC)
              console.log(valueD,oldD)
            })
            c.data=1
            d.value =3

        }
    })
    App.mount("#Application")
  </script>

</html>